<template>
  <CommonPage>
    <MyTable
      ref="$table"
      v-model:query-items="queryItems"
      :columns="columns"
      :get-data="materialApi.list"
      list-key="material_list"
    >
      <template #search>
        <MyTQI>
          <n-input
            v-model:value="queryItems.searchVal"
            type="text"
            placeholder="请输入搜索关键词"
            clearable
          >
            <template #suffix>
              <n-icon size="20" :component="Search"></n-icon>
            </template>
          </n-input>
        </MyTQI>

        <MyTQI>
          <AsyncSelect
            v-model:value="queryItems.projectType"
            placeholder="选择项目类型"
            options="PROJECT_TYPE"
          />
        </MyTQI>
      </template>
      <template #action>
        <n-button v-permission="`material_add`" type="primary" @click="handleAdd">添加</n-button>
      </template>
    </MyTable>
    <MyModal
      ref="$form"
      :model-form="model"
      :disabled="type === 'view'"
      :width="900"
      @submit="handleSubmit"
    >
      <n-form-item
        label="资料名称"
        path="name"
        :rule="{ required: true, message: '请输入资料名称' }"
      >
        <n-input v-model:value="model.name" maxlength="30" show-count clearable />
      </n-form-item>
      <n-form-item label="资料用途" path="dataUsage">
        <n-input v-model:value="model.dataUsage" maxlength="30" show-count clearable />
      </n-form-item>
      <n-form-item
        label="项目类型"
        path="projectType"
        :rule="[{ required: true, message: '请选择项目类型！' }]"
      >
        <AsyncSelect v-model:value="model.projectType" options="PROJECT_TYPE" multiple />
      </n-form-item>
      <n-form-item label="资料链接" path="dataLink">
        <n-input
          v-model:value="model.dataLink"
          type="textarea"
          maxlength="600"
          show-count
          clearable
          :autosize="{
            minRows: 3,
          }"
        />
      </n-form-item>
    </MyModal>
  </CommonPage>
</template>

<script setup lang="jsx">
import { Search } from '@vicons/ionicons5'
import * as materialApi from '@/api/material'
import { useCrudPro } from '@/hooks/useCrudPro'
import { formatToIds, formatToSel } from '@/utils/format'
defineOptions({ name: 'MaterialIndex' })
const queryItems = ref({})
const columns = [
  {
    title: '资料名称',
    key: 'name',
  },
  {
    title: '资料用途',
    key: 'dataUsage',
  },
  {
    title: '项目类型',
    key: 'projectTypeName',
  },
  {
    title: '资料链接',
    key: 'dataLink',
  },
  {
    title: '更新时间',
    key: 'updateTime',
    render: ({ updateTime }) => $format(updateTime),
  },
  {
    title: '更新人',
    key: 'updateUserName',
  },
  {
    title: '操作',
    key: 'actions',
    width: 220,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <n-button
            v-permission="material_delete"
            text
            onClick={() =>
              handleDelete(
                { id: row.id },
                {
                  title: '删除项目资料',
                  content: `请确定是否删除项目资料：${row.name}`,
                }
              )
            }
          >
            删除
          </n-button>
        </n-flex>
      )
    },
  },
]
const { type, model, $form, $table, handleAdd, handleSubmit, handleDelete } = useCrudPro({
  name: '项目资料',
  initForm: {
    name: null,
    dataUsage: null,
    projectType: null,
    dataLink: null,
  },
  apis: {
    add: materialApi.add,
    edit: materialApi.edit,
    del: materialApi.del,
    info: ({ id }) =>
      materialApi.info({ id }).then((res) => {
        res.data.projectType = formatToSel(res.data.projectType)
        return res.data
      }),
  },
  formatParams(params) {
    params.projectType = formatToIds(params.projectType)
    return params
  },
})
</script>
